<template>
  <div class="online-box">
    <div class="online-container">
      <div class="head">
        <p>机器人正在为你服务</p>
        <el-button class="btn" size="small" @click="open">结束沟通</el-button>
      </div>
      <div class="main">
        <div class="main-left">
          <div class="dialogue">
            <div class="year-box">
              <p>2022-03-05 16:55:16 开始沟通</p>
            </div>
            <div class="diglogue-box">
              <div class="dig-item">
                <p class="author">
                  机器人 机器人 今天 <span class="time">09:07:38</span>
                </p>
                <div class="information">
                  <p>欢迎您!</p>
                  <p>我是易驾星在线客服小丽，很高兴为您服务!</p>
                </div>
              </div>
            </div>
            <div class="end-box" v-show="end">
              <p class="end">已结束回话</p>
            </div>
          </div>
          <div class="special-box">
            <el-tooltip
              class="item"
              effect="dark"
              content="表情"
              placement="top"
            >
              <el-button
                type="text"
                class="iconfont icon-biaoqing"
                size="20px"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="图片"
              placement="top"
            >
              <el-button type="text" class="iconfont icon-zhaopian"></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="文件"
              placement="top"
            >
              <el-button type="text" class="iconfont icon-wenjian"></el-button>
            </el-tooltip>
            <el-tooltip 
              class="item"
              effect="dark"
              content="发送提醒"
              placement="top"
            >
              <el-button type="text" class="iconfont icon-doudong"></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="转人工"
              placement="top"
            >
              <el-button type="text" class="iconfont icon-kefu"></el-button>
            </el-tooltip>
          </div>
          <div class="input-container">
            <div class="ipt-box">
              <input type="text" class="ipt" ref="focusInput" />
            </div>
            <div class="send-out">
              <el-button type="primary" size="small" :disabled="end"
                >发送</el-button
              >
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="swiper-container" ref="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img
                  src="../assets/qi/bridge-logo2-skin-0.e61ea2e.png"
                  alt=""
                />
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>

          <p>欢迎您的光临，我们将竭诚为你服务</p>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import Swiper from "swiper";
export default {
  name: "vueName",
  data() {
    return {
      end: false,
    };
  },

  methods: {
    open() {
      this.$confirm("您正在进行在线咨询，确定结束当前对话?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        setTimeout(() => {
          this.end = true;
        }, 600);
      });
    },
  },
  mounted() {
    this.$refs.focusInput.focus();
    new Swiper(".swiper-container", {
      direction: "horizontal",
      grabCursor: true,
      simulateTouch: true,
      observer: true,
      autoplay: true,
    });
  },
};
</script>
 
<style scoped lang = "sass">
.online-box
  width: 100%
  height: 100vh
  background: url('../assets/qi/download.png') no-repeat
  background-size: cover
  .online-container
    width: 800px
    height: 596px
    position: absolute
    top: 50%
    left: 50%
    margin-left: -400px
    margin-top: -298px
    .head
      display: flex
      justify-content: space-between
      align-items: center
      width: 100%
      height: 60px
      background: #4e6ef2
      p
        margin-left: 15px
        color: #fff
        font-size: 14px
      .btn
        width: 80px
        height: 32px
        margin-right: 20px
        border-radius: 8px
        border: 1px solid #fff
        background: transparent
        color: #fff
    .main
      display: flex
      background: #fff
      .main-left
        width: 559px
        border: 1px solid #EBEEF5
        .dialogue
          height: 384px
          .end-box
            display: flex
            justify-content: center
            .end
              padding: 8px 12px
              font-size: 12px
              line-height: 12px
              background: #f5f7fa
              border-radius: 4px
              display: inline-block
              text-align: center
          .year-box
            width: 100%
            height: 52px
            display: flex
            flex-direction: column
            align-items: center
            justify-content: flex-end
            p
              padding: 8px 12px
              font-size: 12px
              line-height: 12px
              background: #f5f7fa
              border-radius: 4px
          .diglogue-box
            padding: 24px 12px
            .dig-item
              .author
                font-size: 12px
                margin-bottom: 4px
                color: #a4a0aa
              .information
                display: inline-block
                padding: 12px
                max-width: 80%
                background: #eff1f7
                border-radius: 0 8px 8px 8px
                line-height: 22px
                p
                  font-size: 12px
        .special-box
          width: 100%
          height: 40px
          border-top: 1px solid #EBEEF5
          button
            font-size: 20px
            color: #DFE1E5
            margin-left: 20px
        .input-container
          .ipt-box
            width: 100%
            height: 68px
            padding: 6px 12px
            .ipt
              width: 100%
              outline: none
              border: none
              font-size: 14px
              line-height: 22px
              resize: none
              flex: 1
              overflow-y: auto
              font-weight: 400
          .send-out
            display: flex
            justify-content: flex-end
            button
              margin-right: 12px
              margin-bottom: 12px
              color: #fff
      .main-right
        background: #fff
        width: 240px
        .swiper-container
          margin: 20px
          width: 200px
          height: 280px
        p
          margin: 0 20px 20px
          color: #000
          font-size: 13px
          line-height: 18px
          max-height: 200px
          max-width: 100%
          overflow: auto
</style>
